<template>
	<view class="content">
		<img :src="baseUrl + articleInfo.image" alt="" mode="widthFix" style="width: 100%;" v-if="articleInfo.image">
		<view class="form">
			<u--form labelPosition="top" labelWidth="260" :model="form" ref="uForm">
				<u-form-item label="公司名称" prop="name">
					<u-input placeholder="请输入公司名称" border="surround" v-model="form.name" :customStyle="{backgroundColor:'#F8F8F8'}"></u-input>
				</u-form-item>
				<u-form-item label="手机号" prop="mobile">
					<u-input placeholder="请输入手机号" border="surround" v-model="form.mobile" :customStyle="{backgroundColor:'#F8F8F8'}"></u-input>
				</u-form-item>
				
				<u-form-item :label="item.name" :prop="'q_'+index" v-for="(item,index) in question" :key="item.id">
					<u-radio-group v-model="form['q_'+index]" placement="column">
						<view class="radio_group">
							<view class="radio_item" v-for="(itm,i) of item.json" :key="i">
								<u-radio :label="itm" :name="itm"   :customStyle="{marginBottom: '8px'}" activeColor="#CE3026"> </u-radio>
							</view>
						</view>
					</u-radio-group>
				</u-form-item>
			</u--form>
		</view>

		<view class="bottom">
			<button class="right" @click="submit">立即咨询</button>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/api/request.js'
	import {
		article,
		zixun
	} from '@/api/api.js'
	export default {
		data() {
			return {
				id: '',
				articleInfo: {},
				question:[],
				baseUrl,
				form: {
					name: '',
					mobile: '',
					q_1:'',
					q_2:'',
					q_3:'',
					q_4:'',
					q_5:'',
				},
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '请输入公司名称',
						trigger: ['blur']
					}],
					
					mobile: [{
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur'],
					}],
					q_1: [{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur']
					}],
					q_2: [{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur']
					}],
					q_3: [{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur']
					}],
					q_4: [{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur']
					}],
					q_5: [{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['blur']
					}],
				}
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getAttr()
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			getAttr(hideLoading) {
				article({
					id: this.id
				}, hideLoading).then(res => {
					this.articleInfo = res.data || {}
					let question = this.articleInfo.question || []
					question.forEach(q=>{
						q.json = JSON.parse(q.json)
					})
					this.question = question
				})
			},
			submit(){
				let that = this
				this.$refs.uForm.validate().then(res => {
					zixun(that.form).then(res=>{
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					})
				}).catch(errors => {
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	view {
		box-sizing: border-box;
	}
	.content {
		padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
	}
	.form {
		padding: 32rpx;
	}
	.radio_group {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
		.radio_item {
			width: 50%;
		}
	}
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		min-height: calc(98rpx + env(safe-area-inset-bottom));
		padding: 0 32rpx;
		width: 100vw;
		display: flex;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		z-index: 999;
		.right {
			width: 100%;
			height: 88rpx;
			background: #CE3026;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
